<template>
	<view class="page-body">
		<u-navbar title="保证金"></u-navbar>
		<u-tabs :list="list" :is-scroll="false" height="100" font-size="32" inactive-color="#86869C"
			active-color="#C39F4F" :current="current" @change="change"></u-tabs>
		<view class="total_list">
			<view class="lists">
				<view class="total_1">已缴</view>
				<view class="total_2">{{headerTotal.amount_paid}}</view>
			</view>
			<view class="lists">
				<view class="total_1">已返</view>
				<view class="total_2">{{headerTotal.amount_returned}}</view>
			</view>

			<view class="lists">
				<view class="total_1">待返</view>
				<view class="total_2">{{headerTotal.amount_be_returned}}</view>
			</view>
			<view class="lists">
				<view class="total_1">冻结</view>
				<view class="total_2">{{headerTotal.frozen_amount}}</view>
			</view>
		</view>
		<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
			<!-- 空白页 -->
			<empty v-if="itemList.list.length === 0"></empty>
			<!-- 列表 -->
			<view v-for="(item,index) in itemList.list" :key="index" class="toppicCourse p20 smll bg-white"
				@click="app.goPage('topicCourseInfo?id='+item.id)">
				<view class="flex_bd ml20">
					<view class="he150 ">
						<view class="status_1" v-if="item.status=== 2">已缴</view>
						<view class="status_2" v-if="item.status=== 3">已返</view>
						<view class="status_3" v-if="item.status=== 4">待返</view>
						<view class="status_3" v-if="item.status=== 1">冻结</view>
						<view class="u-flex u-row-between u-m-t-20 bz_0" v-if="item.status===2">
							<view class="goods_text">{{item.content}}</view>
							<view class="ml_price ">¥{{item.price}}</view>
						</view>
						<view class="u-flex u-row-between u-m-t-20 bz_0" v-if="item.order_id>0"
							v-for="(items,index) in item.goods_order">
							<view class="u-flex">进货【<text
									class="goods_name_text u-line-1">{{items.goods_name}}</text>】{{items.goods_number}}件，差价{{items.balance_deduction}}/件
							</view>
							<view class="ml_price ">¥{{items.balance_deduction}}</view>
						</view>

						<view class="u-flex u-row-between u-m-t-20 bz_1">
							<view class="">上级ID:{{item.proxy_pid}}</view>
							<view class="">{{$u.timeFormat(item.addtime, 'yyyy-mm-dd hh:MM')}}</view>
						</view>
					</view>
				</view>
			</view>

			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from "@/components/empty";
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				baseUrl: this.config.baseUrl,
				keyword: '',
				loadingType: 'more',
				param: {
					p: 0
				},
				itemList: {
					list: []
				},
				list: [{
					name: '我的保证金',
					id: 1,
				}, {
					name: '下级保证金',
					id: 2,
				}],
				headerTotal: {},
				current: 0,
				cid: 1,
				loading: true,
			}
		},
		onLoad(option) {
			if (option.type) {
				this.cid = 2;
				this.current = 1;
			}

			this.loadData();
			this.loadTotal();

		},
		onShow() {},
		onReady() {},
		methods: {
			change(index) {
				if (this.loading == true) {
					this.current = index;
					this.cid = this.list[index].id;
					this.loading = false;
					this.loadData('refresh')
					this.loadTotal()
				}
			},
			loadTotal() {
				this.param.type = this.cid;
				this.$u.post('channel/api.bond/headerTotal', this.param).then(res => {
					this.headerTotal = res.data

				})
			},
			loadData(source = 'add') {
				if (source == 'add' && this.loadingType == 'nomore') {
					return;
				}

				if (source === 'refresh') {
					this.param.p = 0;
					this.itemList.list = [];
				}
				this.param.keyword = this.keyword;
				this.param.p++;
				this.param.type = this.cid;
				this.$u.post('channel/api.bond/getList', this.param).then(res => {
					this.loading = true;
					this.itemList.list = this.itemList.list.concat(res.data.list);

					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(this.itemList, 'loaded', true);
					//判断是否还有下一页，有是more  没有是nomore
					this.loadingType = this.param.p == res.data.page_count ? 'nomore' : 'more';

				})
			},
		}
	}
</script>

<style lang="scss">
	.toppicCourse {
		margin-top: 20rpx;
	}

	.list-scroll-content {
		position: relative;
		height: calc(100vh - 80rpx);

		.goods_text {
			width: 518rpx;

		}

		.goods_name_text {
			max-width: 170rpx;
			// overflow: hidden;
			display: inline-block;
			// line-height: 1;
			// overflow: hidden;
			// /*超出部分隐藏*/
			// white-space: nowrap;
			// /*不换行*/
			// text-overflow: ellipsis;
			// /*超出部分文字以...显示*/
		}

		.status_1 {
			height: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #C39F4F;
			line-height: 45rpx;
		}

		.status_2 {
			height: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #67C800;
			line-height: 45rpx;
		}

		.status_3 {
			height: 45rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #999999;
			line-height: 45rpx;
		}

		.ml_price {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
		}

		.bz_0 {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
		}

		.bz_1 {
			height: 33rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #86869C;
			line-height: 33rpx;
		}
	}




	.total_list {
		margin-top: 22rpx;
		display: flex;
		justify-content: space-around;
		background-color: #C39F4F;
		color: #FFFFFF;

		.lists {

			.total_1 {
				height: 40rpx;
				font-size: 28rpx;
				margin-top: 30rpx;
				line-height: 40rpx;

			}

			.total_2 {
				height: 45rpx;
				line-height: 45rpx;
				font-size: 32rpx;
				margin-top: 10rpx;
				margin-bottom: 30rpx;
			}
		}

	}
</style>
